<template>
  <div class="turn_into_wrap">
    <headTop :headClass="'white_header'">To change into</headTop>
    <div class="container">
      <div class="title">
        <h2>Receipt code</h2>
        <span>Long press saved</span>
      </div>
      <div class="code_wrap">
        <img :src="code" alt="">
      </div>
    </div>
    <div class="view_record">
      <span class="public_with_button" @click="viewRecord">View transfer record</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'turnInto',
  data () {
    return {
      code: ''
    };
  },
  beforeMount () {
    this.getData();
  },
  methods: {
    viewRecord () {
      this.$router.push('cashintoRecord');
    },
    // Get payment two-dimensional code
    getData () {
      this.axios.get('index/users/receivablesCode').then(({data}) => {
        if (data.status === 200) {
          this.code = data.data.receivables;
        } else {
          this.Toast(data.message);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/mixin.scss';
  .turn_into_wrap{
    padding-top: 120px;
    background-color: #f5f5f5;
    .container{
      width: 100%;
      height: 712px;
      background-color: #fff;
      padding: 0 30px;
      margin-bottom: 80px;
      .title{
        width: 100%;
        height: 108px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28px;
        border-bottom: 1px solid #e6e6e6;
        h2{
          color: #282828;
          font-size: 28px;
        }
        >span{
          color: $color;
        }
      }
      .code_wrap{
        width: 100%;
        height: 604px;
        padding-top: 62px;
        text-align: center;
        img{
          width: 480px;
          height: 480px;
        }
      }
    }
    .view_record{
      width: 100%;
      text-align: center;
    }
  }
</style>
